<template>
	<view class="chat-page">
		<!-- 顶部操作 -->
		<view class="operate">
			<view class="operate-btn">
				<view class="iconfont icon-f fs-40 icon-shouji"></view>
				<view class="fs-24">打电话</view>
			</view>
			<view class="operate-btn">
				<view class="iconfont icon-f fs-40 icon-weixin"></view>
				<view class="fs-24">微信号</view>
			</view>
			<view class="operate-btn">
				<view class="iconfont icon-f fs-40 icon-gerenxinxi_o"></view>
				<view class="fs-24">发简历</view>
			</view>
			<view class="operate-btn">
				<view class="iconfont icon-f fs-40 icon-kulian"></view>
				<view class="fs-24">不感兴趣</view>
			</view>
		</view>

		<!-- 聊天内容 -->
		<view class="chat-content">
			<scroll-view scroll-y="true" class="chat-scroll">
				<!-- 时间间隔 -->
				<view class="time-interval fs-24">03-08 17：35</view>
				<!-- 上传作品图片 -->
				<view class="work-upload">
					<view class="des">
						<image src=""></image>
						<view class="des-content">
							<view class="c-top fs-30">添加作品图片</view>
							<view class="c-bottom fs-28">优秀作品会获得更多老板青睐</view>
						</view>
					</view>
					<button class="upload-btn fs-30">立即上传</button>
				</view>
				<!-- 正在应聘的岗位 -->
				<view class="apply-post">
					<view class="post-content">
						<view class="post-name">
							<text class="fs-36">UI设计师</text>
							<text class="28">6-9K</text>
						</view>
						<view class="post-company fs-28">创听科技</view>
						<view class="post-des">
							<view class="des-item fs-24"><text>移动端</text></view>
							<view class="des-item fs-24"><text>PC端</text></view>
							<view class="des-item fs-24"><text>UI设计</text></view>
							<view class="des-item fs-24"><text>设计师</text></view>
						</view>
						<view class="post-rec">
							<image src=""></image>
							<text class="fs-26">成大妆 · HR</text>
						</view>
					</view>
					<view class="start-time fs-26">3月8日 17:35 有你发起的沟通</view>
				</view>
				<!-- 文本消息 -->
				<view class="chat-msg chat-in">
					<image src="" class="chat-avatar"></image>
					<view class="c-c c-in fs-28"><view class="text">您好，想和您沟通一下</view></view>
				</view>
				<view class="chat-msg chat-out">
					<view class="c-c c-out fs-28"><view class="text">您好</view></view>
					<image src="" class="chat-avatar"></image>
				</view>
				<!-- 交换微信-询问 -->
				<view class="chat-msg chat-in">
					<image src="" class="chat-avatar"></image>
					<view class="c-c c-in fs-28">
						<view class="text">我想要你的微信号，您是否同意?</view>
						<view class="operate-btn">
							<button>拒绝</button>
							<button>同意</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部输入框 -->
		<view class="chat-input">
			<button class="com-btn fs-26">常用语</button>
			<input type="text" class="input" placeholder="新消息" />
			<view class="more-btn">
				<text class="iconfont icon-f fs-60 icon-xiaolian"></text>
				<text class="iconfont icon-f fs-60 icon-tupian"></text>
			</view>
		</view>
	</view>
</template>

<script></script>

<style>
page {
	height: 100%;
	width: 100%;
}
</style>
<style lang="scss" scoped>
view {
	box-sizing: border-box;
	width: 100%;
}
.iconfont {
	color: #666666;
}
.chat-page {
	height: 100%;
	background-color: #f6f6f6;

	.operate {
		background-color: #ffffff;
		height: 108rpx;
		display: flex;
		align-items: center;
		&-btn {
			text-align: center;
			flex: 1;
		}
	}

	.chat-content {
		height: calc(100% - 214rpx);
		padding: 0 22rpx;

		.chat-scroll {
			width: 100%;
			height: 100%;
		}
		.time-interval {
			text-align: center;
			margin: 40rpx 0;
			color: #999999;
		}
		.chat-in {
			text-align: left;
		}
		.chat-out {
			text-align: right;
		}
		.chat-avatar {
			width: 76rpx;
			height: 76rpx;
			vertical-align: top;
		}
		.c-c {
			display: inline-block;
			position: relative;
			min-height: 76rpx;
			max-width: 60%;
			width: auto;
			border-radius: 8rpx;
			.text {
				padding: 20rpx 30rpx;
			}
			.operate-btn {
				overflow: hidden;
				border-radius: 0 0 8rpx 8rpx;
				height: 72rpx;
				border-top: 2rpx solid #eeeeee;
				& > button {
					font-size: 28rpx;
					background-color: #ffffff;
					height: 100%;
					line-height: 72rpx;
					width: 50%;
					text-align: center;
					&:first-child {
						border-right: 2rpx solid #eeeeee;
					}
					&:last-child {
						color: #84c0f4;
					}
				}
			}
		}
		.c-in {
			background-color: #ffffff;
			margin-left: 10rpx;
			&:before {
				content: '';
				position: absolute;
				left: -10rpx;
				top: 28rpx;
				border-right: 10rpx solid #ffffff;
				border-top: 10rpx solid transparent;
				border-bottom: 10rpx solid transparent;
			}
		}
		.c-out {
			background-color: #9eea6a;
			margin-right: 10rpx;
			&::after {
				content: '';
				position: absolute;
				right: -10rpx;
				top: 28rpx;
				border-left: 10rpx solid #9eea6a;
				border-top: 10rpx solid transparent;
				border-bottom: 10rpx solid transparent;
			}
		}

		.chat-msg {
			margin-top: 28rpx;

			&:last-child {
				padding-bottom: 28rpx;
			}
		}

		.work-upload {
			background-color: #ffffff;
			width: 546rpx;
			height: 252rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 0 auto;
			margin-top: 28rpx;

			.des {
				height: 164rpx;
				padding: 40rpx 32rpx 44rpx 32rpx;
				border-bottom: 2rpx solid #eeeeee;
				& > image {
					width: 80rpx;
					width: 80rpx;
					margin-right: 28rpx;
					vertical-align: top;
				}
				.des-content {
					display: inline-block;
					width: calc(100% - 108rpx);
					height: 80rpx;
				}
				.des-top {
					display: inline-block;
					vertical-align: text-top;
					height: 40rpx;
				}
				.des-bottom {
					display: inline-block;
					vertical-align: text-bottom;
					height: 40rpx;
				}
			}

			.upload-btn {
				color: #71b9f8;
				background-color: #ffffff;
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
			}
		}

		.apply-post {
			width: 686rpx;
			height: 422rpx;
			border-radius: 12rpx;
			margin: 0 auto;
			margin-top: 28rpx;
			padding: 0 34rpx;
			background-color: #ffffff;
			.post-content {
				padding: 44rpx 0;
				height: 348rpx;
				border-bottom: 2rpx solid #eeeeee;
				.post-name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					& > text:last-child {
						color: #84c0f4;
					}
				}
				.post-company {
					margin: 32rpx 0;
				}
				.post-des {
					display: flex;
					.des-item {
						background-color: #f5f5f5;
						border-radius: 4rpx;
						text-align: center;
						line-height: 46rpx;
						margin-right: 10rpx;
						& > text {
							padding: 0 14rpx;
						}
					}
				}
				.post-rec {
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					& > image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 20rpx;
					}
				}
			}
			.start-time {
				color: #999999;
				padding: 20rpx;
				margin-left: 34rpx;
			}
		}
	}

	.chat-input {
		background-color: #ffffff;
		height: 102rpx;
		padding: 24rpx 0;
		// display: flex;
		// align-items: center;
		.com-btn {
			margin-left: 30rpx;
			margin-right: 24rpx;
			width: 98rpx;
			height: 54rpx;
			line-height: 54rpx;
			border: none;
			background-color: #84c0f4;
			color: #ffffff;
			text-align: center;
			border-radius: 8rpx;
		}
		.input {
			display: inline-block;
			width: calc(100% - 334rpx);
			height: 54rpx;
		}
		.more-btn {
			display: inline-block;
			padding-left: 20rpx;
			width: 180rpx;
			.icon-f {
				margin-right: 20rpx;
			}
		}
	}
}
</style>
